<template>
  <div ref="pie"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Pie',
  data() {
    return {
      echarts: null,
      option: {
        title: {
          text: '运维类型百分比',
          textStyle: {
            fontSize: 12,
            fontWeight: 900,
            color: 'gray'
          },
          top: 192,
          left: 204
        },
        legend: {},
        series: [
          {
            name: '运维类型百分比',
            type: 'pie',
            data: [
              {
                name: '巡检维护', value: 10,
                label: {color: 'green'},
                // 设置高亮时的显示
                emphasis: {
                  label: {color: 'black'}
                }
              },
              {name: '标样核查', value: 32},
              {name: '试剂更换', value: 78},
              {name: '加标回收', value: 60},
              {name: '设备维护', value: 89}
            ],
            label: {
              formatter(params) {
                return `{a|${params.name}: ${params.value}\n(${params.percent}%)}`
              },
              rich: {
                a: {
                  align: 'center'
                }
              }
            },
            // 设置饼图半径，设置为数组且多个则为圆环（这里一定要小半径在前）
            radius: ['30%', '50%']
          }
        ]
      }
    }
  },
  mounted() {
    this.echarts = echarts.init(this.$refs.pie)
    this.echarts.setOption(this.option)
  },
}
</script>

<style scoped>

</style>
